import { Skeleton, SkeletonPanel, SkeletonRows } from "@/components/ui";

export default function Loading() {
  return (
    <>
      <div className="mb-3 flex flex-wrap items-end justify-between gap-3">
        <div className="flex min-w-0 flex-col gap-2">
          <div className="flex items-center gap-2">
            <Skeleton className="h-4 w-20" />
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-16" />
          </div>
          <Skeleton className="h-6 w-[28rem] max-w-full" />
          <Skeleton className="h-3 w-80 max-w-full" />
        </div>
        <div className="flex gap-2">
          <Skeleton className="h-7 w-20" />
          <Skeleton className="h-7 w-28" />
        </div>
      </div>
      <Skeleton className="mb-3 h-3 w-96 max-w-full" />
      <div className="mb-4 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line bg-line sm:grid-cols-4">
        {Array.from({ length: 4 }, (_, i) => (
          <div key={i} className="flex flex-col gap-1.5 bg-panel px-3 py-2">
            <Skeleton className="h-2.5 w-16" />
            <Skeleton className="h-5 w-12" />
            <Skeleton className="h-2.5 w-24" />
          </div>
        ))}
      </div>
      <div className="grid gap-4 xl:grid-cols-[1fr_340px]">
        <div className="flex flex-col gap-4">
          <div className="panel">
            <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-40" /></div>
            <SkeletonRows rows={6} />
          </div>
          <div className="panel">
            <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-20" /></div>
            <SkeletonRows rows={6} />
          </div>
        </div>
        <aside className="flex flex-col gap-4">
          <SkeletonPanel lines={2} />
          <SkeletonPanel lines={6} />
          <SkeletonPanel lines={4} />
        </aside>
      </div>
    </>
  );
}